<template>
	<view>
		<view class="order-state">
			<view>{{orderDetail.orderStatus}}</view>
			<view class="count-down" v-if="orderDetail.showOrderPay">
				剩<uni-countdown style="font-size: 24rpx; width: 200rpx;" color="#FFF" splitorColor="#FFF"
					backgroundColor="#00" :showDay="false" :minute="orderDetail.remainingTime / 60" :second="orderDetail.remainingTime % 60" :showColon="false" @timeup="timeup">
				</uni-countdown>自动关闭
			</view>
			<view v-if="orderDetail.orderCancelReason">
				<view class="sub-desc">关闭类型：取消订单</view>
				<view class="sub-desc">取消原因：{{orderDetail.orderCancelReason || ''}}</view>
			</view>
		</view>

		<view class="express-box b-b">
			<image src="../../static/ssmall/transfer.png"></image>
			<text class="express-info">暂无物流信息</text>
		</view>

		<view class="address-box">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{orderDetail.receiverName || ''}}</text>
						<text class="mobile">{{orderDetail.receiverMobile || ''}}</text>
					</view>
					<text class="address">{{orderDetail.receiverArea || ''}} {{orderDetail.receiverAreaInfo || ''}}</text>
				</view>
			</view>
		</view>

		<view class="goods-box">
			<view class="top">
				<uni-icons type="shop"></uni-icons>
				<text class="store-name">{{orderDetail.orderGoods[0].storeName || ''}} ></text>
			</view>

			<view class="goods">
				<image :src="orderDetail.orderGoods[0].fullPath"></image>
				<view class="right">
					<view class="goods-name">{{orderDetail.orderGoods[0].name || ''}}</view>
					<view class="goods-price">¥{{orderDetail.orderGoods[0].goodsPrice || ''}}</view>
					<view class="goods-number">
						x{{orderDetail.orderGoods[0].goodsCount > 0 ? orderDetail.orderGoods[0].goodsCount : 1}}
					</view>
				</view>

			</view>
		</view>

		<view class="order-cal">
			<view class="total-box">
				<text class="left-title">实付金额</text>
				<text class="price">¥{{orderDetail.totalPrice || ''}}</text>
			</view>
			<view class="total-box">
				<text class="right-title">商品总价</text>
				<text class="right-title">¥{{orderDetail.goodsAmount || ''}}</text>
			</view>
			<view class="total-box">
				<text class="right-title">运费</text>
				<text class="right-title">¥{{orderDetail.shipPrice || ''}}</text>
			</view>
		</view>

		<view class="order-detail">
			<view class="total-box">
				<text class="left-title">订单编号：{{orderDetail.orderNum || ''}}</text>
				<text class="right-title" @click="copyOrderId">复制</text>
			</view>
			<view class="total-box">
				<text class="left-title">创建时间：{{orderDetail.addTime || ''}}</text>
			</view>
			<view v-if="orderDetail.orderStatusInt == 50">
				<view class="total-box">
					<text class="left-title">付款时间：{{orderDetail.payTime || ''}}</text>
				</view>
				<view class="total-box">
					<text class="left-title">发货时间：{{orderDetail.shipTime || ''}}</text>
				</view>
				<view class="total-box">
					<text class="left-title">订单备注：{{orderDetail.orderRemark || ''}}</text>
				</view>
			</view>
		</view>
		<view class="contract" @click="$api.msg('联系客服')">
			<uni-icons type="headphones"></uni-icons>
			<text class="title">联系客服</text>
		</view>

		<view class="section">猜你喜欢</view>
		<view class="goods-section">
			<view class="section-list-cell" v-for="(item,index) in goodsList" :key="index"
				@click="navToDetailPage(item.goodId)">
				<view class="cell-container">
					<image class="image-wrapper" :src="item.goodImage"></image>
					<text class="title">{{item.goodsName}}</text>
					<view class="selfsupport" v-if="item.selfSupport">自营</view>
					<text class="price">¥{{item.currentPrice}}</text>
				</view>
			</view>
		</view>
		<view class="uni-data-loading">
			<uni-load-more :status="status" iconType="auto" :iconSize="16" :content-text="contentText"></uni-load-more>
		</view>

		<view class="action-box b-t" v-if="orderDetail.show">
			<button class="action-btn" @click.stop="cancelOrder(orderItem)">取消订单</button>
			<button class="action-btn recom" v-if="orderDetail.showOrderPay" @click="gotoPay">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderDetail: {},
				goodsList: [],
				id: '',
				pageIndex: '1',
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			}
		},
		onLoad(option) {
			this.orderId = option.orderId;
			console.log("this.orderId: ", this.orderId);

			uni.showLoading({
				title: '加载中...'
			})
			this.loadData();
		},
		onReachBottom() {
			this.status = 'more';
			this.pageIndex++;
			this.getGoodsList(this.id);
		},
		methods: {
			async loadData() {
				
				
				let data = {
					"orderId": this.orderId
				}
				
				let res = await this.helper.requestAPI(this.api.orderdetail,data,1);
				this.orderDetail = res.body.orderDetail;
				this.id = this.orderDetail.orderGoods[0].id;
				this.getGoodsList(this.id);
			},
			getGoodsList(id) {

				this.status = 'loading';

				let data = {
					"head": {
						"pageCount": this.pageIndex,
						"screenWidth": 375,
						"accesstoken": "4acab259-7185-41f9-bec7-914a48946b3f",
						"pageSize": "10",
						"version": "v1"
					},
					"body": {
						"id": id
					}
				}

				uni.request({
					url: 'http://218.5.2.10:12580/mall/new/mobile/home/goodsRandomGuessLike.htm',
					method: 'POST',
					data: data,
					success: res => {
						let statusCode = res.data.head.status;
						let message = res.data.head.message;
						if (statusCode == '200') {

							let list = res.data.body.guessLikeGoods
							this.goodsList = this.pageIndex == 1 ? list : this.goodsList.concat(list);
							this.loading = false;
						} else {
							this.$api.msg(message);
						}
					},
					fail: (error) => {
						console.log(error.message);
					}
				})
			},
			navToDetailPage(goodsId) {
				// this.$api.msg('商品id:' + goodsId);

				uni.navigateTo({
					url: '/pages/product/product?id=' + goodsId
				});
			},
			copyOrderId() {
				uni.setClipboardData({
					data: this.orderDetail.orderId,
					success: () => {
						this.$api.msg('复制成功');
					}
				})
			},
			timeup() {
				uni.showLoading({
					title: '加载中...'
				})
				this.loadData();
			},
			gotoPay() {
				uni.showLoading({
					title: '跳转支付中...',
					mask: true
				});
				
				let data = {
					"head": {
						"version": "v1",
						"screenWidth": 375,
						"accesstoken": "4acab259-7185-41f9-bec7-914a48946b3f"
					},
					"body": {
						"orderId": this.orderDetail.outOrderId
					}
				}
			
				uni.request({
					url: 'http://218.5.2.10:12580/mall/new/mobile/login/orderPay2.htm',
					method: 'POST',
					data: data,
					success: res => {
						uni.hideLoading();
			
						let statusCode = res.data.head.status;
						let message = res.data.head.message;
						let orderInfo = res.data.body;
						if (statusCode == '200') {
							uni.navigateTo({
								url: '../payment/payment?orderDto=' + encodeURIComponent(JSON
									.stringify(orderInfo.orderDto))
							});
			
						} else {
							this.$api.msg(message);
						}
					},
					fail: (error) => {
						this.$api.msg('提交失败');
						uni.hideLoading();
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}

	.order-state {
		background-color: $base-color;
		color: white;
		font-size: $uni-font-size-base;
		padding: 30rpx 100rpx;
		height: 160rpx;

		.count-down {
			display: flex;
			align-items: center;
			font-size: $uni-font-size-sm;
			height: 60rpx;
			line-height: 60rpx;
		}

		.sub-desc {
			font-size: $uni-font-size-sm;
		}
	}

	.express-box {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #fff;
		position: relative;

		color: $font-color-light;

		.express-info {
			padding-left: 20rpx;
			font-size: $uni-font-size-base - 2rpx;
		}

		image {
			width: 32rpx;
			height: 28rpx;
		}

	}

	.address-box {
		padding: 20rpx 0;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90rpx;
			color: #888;
			font-size: 44rpx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: $font-color-dark;
		}

		.name {
			font-size: $uni-font-size-base;
			margin-right: 24rpx;
		}

		.address {
			margin-top: 16rpx;
			margin-right: 20rpx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: $uni-font-size-base;
			color: $font-color-light;
			margin-right: 30rpx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5rpx;
		}
	}

	.goods-box {
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: white;

		.top {
			display: flex;
			align-items: center;

			.store-name {
				font-size: $uni-font-size-sm;
				margin-left: 20rpx;
			}
		}

		.goods {
			display: flex;
			margin-top: 30rpx;

			.right {
				padding: 0 20rpx;
				height: 150rpx;
				position: relative;
				flex: 1;

				.goods-name {
					font-size: $uni-font-size-sm;
					padding-right: 100rpx;
				}

				.goods-price {
					position: absolute;
					font-size: $uni-font-size-sm + 2rpx;
					color: $base-color;
					top: 0;
					right: 0;
				}

				.goods-number {
					position: absolute;
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;

					right: 0;
					bottom: 0;
				}
			}
		}

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
		}
	}

	.total-box {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;

		.left-title,
		.right-title {
			font-size: $uni-font-size-sm;
		}

		.price {
			color: $base-color;
			font-size: $uni-font-size-sm;
		}

		.right-title {
			color: $font-color-light;
		}
	}

	.order-cal {
		margin-top: 20rpx;
		background-color: white;
		padding: 20rpx;

	}

	.order-detail {
		margin-top: 20rpx;
		background-color: white;
		padding: 20rpx;

		color: $font-color-light;

	}

	.contract {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		padding-bottom: 20rpx;

		.title {
			margin-left: 10rpx;
			font-size: $uni-font-size-sm;
			color: $font-color-light;
		}
	}

	.section {
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
	}

	.goods-section {
		display: flex;
		flex-wrap: wrap;
		margin: 0 20rpx;

		.section-list-cell {
			display: inherit;
			width: 48%;
			height: 508rpx;

			&:nth-child(2n+1) {
				margin-right: 3%;
			}

			.cell-container {
				display: inherit;
				position: relative;
				flex-direction: column;
				background: white;
				width: 100%;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.image-wrapper {
				width: 100%;
				height: 319rpx;
				overflow: hidden;
				border-radius: 10rpx;
			}

			.title {
				color: #333333;
				font-size: 26rpx;
				line-height: 30rpx;
				margin: 17rpx 18rpx 0;

				overflow: hidden;
				-webkit-line-clamp: 1;
				text-overflow: clip;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.selfsupport {
				color: white;
				background: #EF2B2C;
				font-size: 20rpx;
				text-align: center;
				margin: 11rpx 0 0 18rpx;
				width: 71rpx;
				height: 33rpx;
			}

			.price {
				position: absolute;
				left: 16rpx;
				bottom: 16rpx;
				color: #EF2B2C;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}

	.uni-data-loading {
		display: flex;
		justify-content: center;
		width: 100%;
		color: #999;
	}

	.action-box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 20rpx;
		height: calc(100rpx + env(safe-area-inset-bottom));
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		
		padding-bottom: env(safe-area-inset-bottom); 

		.action-btn {
			width: 160rpx;
			height: 60rpx;
			margin: 0;
			margin-left: 24rpx;
			padding: 0;
			text-align: center;
			line-height: 60rpx;
			font-size: $uni-font-size-sm + 1rpx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100rpx;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
</style>
